VUE-cli打包后的问题

本节主要是打包时候要注意的问题

(一) 打包后页面一片空白

• 找到config下面的index.js然后在里面把路径""变成"."

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

要是后端的URL地址是http://xxx.com/prove/
那只有修改路径

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/prove',

（二）打包以后CSS里面背景图片出不来

• 找到build下面的utils.js找到下面的代码添加路径

  if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:"../../",
        fallback: 'vue-style-loader'
      })

(三) vue-cli 里面图片的位置

• 图片最好都放到static里面。要不然打包以后会出现问题。要是html标签里面img可以写相对路径比如

  <img src="../../../static/images/brand@2x.png" alt="">

要是想改变vue里面纯JS比如动态绑定的地址。可以直接写路径
也可以在data里面直接require

<img :src="youhuiband" alt="">
youhuiband:'/static/images/decrease_1@2x.png'
youhuiimg:require('@/asset/images/1,jpg')