Comments (8)
推荐是用 npm install 安装js包,然后在需要的组件里import进来
像
src/view/blog/index.js
/src/view/blog/index.js
,
或者
src/view/blog/components/list/article_list.vue
一样
css的话,一般直接引用就可以了吧,路径写全就行
from vue-multi-page.
这是我们后台的index.html模版,使用的bootstrap的css,可以正常使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
<!-- css for AdminLTE -->
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/jvectormap/2.0.4/jquery-jvectormap.min.css" rel="stylesheet">
<!-- Theme style -->
<link href="//cdn.bootcss.com/admin-lte/2.3.5/css/AdminLTE.css" rel="stylesheet">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="//cdn.bootcss.com/admin-lte/2.3.5/css/skins/_all-skins.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<title>后台</title>
</head>
<body class="sidebar-mini skin-blue-light">
<div class="wrapper">
<div class="content-wrapper" style="min-height: 901px;">
<div class="row">
<div class="main">
<div id="app"></div>
</div>
</div>
</div>
</div>
<script>
// AdminLTE配置项
var AdminLTEOptions = {
//General animation speed for JS animated elements such as box collapse/expand and
//sidebar treeview slide up/down. This options accepts an integer as milliseconds,
//'fast', 'normal', or 'slow'
animationSpeed: 'fast',
};
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="//cdn.bootcss.com/admin-lte/2.3.5/js/app.min.js"></script>
<!-- Sparkline -->
<script src="//cdn.bootcss.com/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<!--
暂时用不到,注掉
<script src="//cdn.bootcss.com/jvectormap/2.0.4/jquery-jvectormap.min.js"></script>
<script src="//cdn.bootcss.com/Chart.js/2.2.2/Chart.js"></script>
-->
<!-- SlimScroll 1.3.0 -->
<script src="//cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
</body>
</html>
from vue-multi-page.
我最一开始遇到问题的时候把css和js放在base.vue里面import进去了
<style scoped>
@import url('../../../../static/media/vendor/fontawesome/css/font-awesome.min.css');
@import url('../../../../static/media/vendor/simple-line-icons/css/simple-line-icons.css');
@import url('../../../../static/media/vendor/bootstrap/dist/css/bootstrap.css');
@import url('../../../../static/media/css/app.css');
@import url('../../../../static/media/css/eniw.css');
</style>
<script>
import '../../../../static/media/vendor/modernizr/modernizr.custom.js'
// import '../../../../static/media/vendor/jquery/dist/jquery.js'
import '../../../../static/media/vendor/bootstrap/dist/js/bootstrap.js'
// import '../../../../static/media/vendor/jQuery-Storage-API/jquery.storageapi.js'
// import '../../../../static/media/vendor/screenfull/dist/screenfull.js'
import '../../../../static/media/vendor/sparkline/index.js'
这样的话样式基本都能显示。
之后一直在搞别的,后来看了您的回复,我回去后试了把css和js 链接就放在index.html里面,css和js文件放在 src/lib/js 和src/lib/css 中
<!DOCTYPE html>
<html lang="zh-CN">
<link rel="stylesheet" href="../../lib/css/font-awesome.min.css">
<link rel="stylesheet" href="../../lib/css/simple-line-icons.css">
<link rel="stylesheet" href="../../lib/css/bootstrap.css" id="bscss">
<link rel="stylesheet" href="../../lib/css/app.css" id="maincss">
<link rel="stylesheet" href="../../lib/css/eniw.css">
<head>
<title>Dashbord</title>
</head>
<body>
<div id="app"></div>
<script src="../../lib/js/modernizr.custom.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/bootstrap.js"></script>
<script src="../../lib/js/jquery.storageapi.js"></script>
<script src="../../lib/js/screenfull.js"></script>
<script src="../../lib/js/index.js"></script>
<script src="../../lib/js/app.js"></script>
<!--<script src="src/js/html/dashboard.js"></script>-->
</body>
</html>
from vue-multi-page.
1.我遇到的问题是,发现build 后,dist 生成的html 引入的是cdn的 文件,我希望引入的还是静态路径的地址,这样应该怎么配置调整呢?
2. map.json 里的那些JS 的cdn路径是怎么生成的呢?看您文档没看到
from vue-multi-page.
@ameibj map.json是由build/plugin/webpack/generate_map_json.js 这个文件生成的,cdn路径在/config/index.js的build: assetsPublicPath里进行配置
dist里的html除了自动生成的app.js之外,其他代码都是直接从项目的html模板里复制过来的,如果要改的话直接改模板就行
from vue-multi-page.
谢谢,我知道了!我如果要使用静态的路径把 assetsPublicPath: 'http://staticdemo.yaozeyuan.online', // 静态地址前缀,使用网址以便对外发布
改为 assetsPublicPath: ‘’ ‘’就可以了吧
from vue-multi-page.
@HongHaiyang src目录里的文件只能作为js库import,如果想作为一个单独的文件对外发布的话还是要把他们放到static文件夹里才行
from vue-multi-page.
from vue-multi-page.
Related Issues (6)
- 如何打开history模式? HOT 2
- CommonsChunkPlugin被注释了? HOT 1
- seo
- '
- '
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-multi-page.