VUE-CLI2.0使用过程中注意事项

1.图片的引用

• img标签引用图片放在src文件的assets下
  
• 动态绑定img的src属性(图片放在src文件的assets下)
  
  
  js中使用图片用require()

注意：要使用相对路径

2.vue中静态文件夹static的引用问题

只能放一些静态文件，如图片，css样式文件，js插件等；

在vue项目任何文件中引用static中的文件都要以"/static"开始，如在index.html中引入插件

不能通过http请求静态文件夹static里的文件

3.修改打包后的生成的HTML文件的名称（原名index.html）和生成的静态资源文件夹名称(原名static)

1、修改config文件夹下的index.js文件

dev: {

    // Paths
    assetsSubDirectory: 'dangstatic',  //这里修改为dangstatic 
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
...
},
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/dang.html'),  //这里修改为dang.html

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'dangstatic',  //这里打包后的静态文件名称修改为'dangstatic'
    assetsPublicPath: '/',

2、修改build文件夹下的webpack.dev.conf.js文件

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../dangstatic'),  //这里修改为dangstatic
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

3、修改build文件夹下的webpack.prod.conf.js文件

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../dangstatic'),//这里修改为dangstatic
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

4.修改静态文件夹名称
原名"static"修改为"dangstatic"

特别注意： 所以使用到原static文件夹下资源的组件都要把路径中的static修改为dangstatic

3.打包 npm run build 扔到服务器

4.给v-html中的元素添加CSS样式

方法一： 去掉scoped属性
scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而v-html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上当前组件的属性，解决的话把scoped属性去掉就行了。

方法二： 在写样式的时候添加>>>

方法二一定得使用css语法并且必须要有scoped属性才行，在less预处理中会报错

5.vue中引入less或sass

vue-cli中已经配置好sass及less配置：

sass:

npm install node-sass --save-dev

npm install sass-loader --save-dev

less:

npm install less --save-dev

npm install less-loader --save-dev

然后在需要的组件中设置

6.实现图片的懒加载

1、安装vue-lazyload插件：

npm install vue-lazyload --save

2、在main.js中引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
    loading: '/static/loading-svg/loading-balls.svg'
})

需要先在static静态文件夹放入svg文件
3.用v-lazy指令代替v-bind:src属性

7.vue打包后直接把dist里的文件放到服务器上即可，（nodejs、java等）后端配置静态文件的引用，不需要作下面任何的操作。

若放在php的服务器（php不配置静态文件引用的情况下），发现一片空白，解决办法如下

问题一：页面全部空白
首先在config文件夹下的index.js文件中修改

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

把assetsPublicPath: '/'修改为assetsPublicPath: './'

问题二：我再次打包后，页面可以正常打开。但是页面上的一些背景图片请求失败。
解决办法如下：
在build文件夹下的utils.js问文件中修改为

添加一句publicPath:'../../',

问题三： 另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。

问题四： 所有引用static静态文件夹中的文件都要以"./static"开始

再次打包npm run build运行