Vue.js 项目build后路径问题

Vue.js 项目build后路径问题

执行npm run build 后再打开index.html发现引用的css和js出现了路径找不到的问题。 
打开config/index.js 
找到build：

module.exports = {
      build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
      },
      dev: {
           ...
      }
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

把 assetsPublicPath : ‘/’ 改成 assetsPublicPath : ”

图片路径问题

在项目中遇到需要动态的改变图片路径，图片路径并非是从后台获取过来的数据。 
因此在data中必须用require加载，否则会当成字符串来处理。

<script>
    export default{
    name: 'msg',
    mounted () {

    },
    data () {
      return {
          listdata: [
            {title: '标题文字1', link: '/', head: require('../assets/head.jpg')},
            {title: '标题文字2', link: '/', head: require('../assets/head2.jpg')}
          ]
      }
    }
  }
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/haoge744/article/details/77714921