vue项目本地打包

原创已于 2022-03-08 17:23:08 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-12-23 15:32:12 首次发布

Vue+Element 同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

** vue-cli版本是 2.9.6 查看命令：vue --version
记录第一次vue项目打包遇到的问题以及解决方法**

1. 第一步配置打包路径给下面几个文件添加./ 如果不配置 npm run build 后打开Index.html是空白
/build/webpack.prod.conf.js

 output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    //新增
    publicPath:'./'
  },

/buildwebpack.base.conf.js

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? "./"+config.build.assetsPublicPath   //新增"./"
      : "./"+config.dev.assetsPublicPath  //新增"./"
  },

/src/router/index.js

 mode: "hash"   //模式设置hash

2. 打包期间遇到图片显示失败的问题：解决方法如下

在这里插入图片描述

/build/unitl.js

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        // 添加publicPath 可以解决图片显示失败的问题
        publicPath:'../../'
      })
    }

/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值修改为./

3.最后遇到了打包后代理失效的问题看下面解决方法：

config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'"/api"' //配置运行环境 代理路径的符号
 })

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"http://*********:8080"' //生产环境的地址
 }

config/index.js

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 后端请求地址代理，配置后target再之后的页面调用时就直接指代 
     proxyTable: {
      '/api': {
        target: 'http://192.168.0.109:8080',  
        changeOrigin: true,
        pathRewrite: { 
          '^/api': 'http://192.168.0.109:8080'
        },
        
      },
    },
    host: 'localhost', 
    port: 8080,

最后在main.js把baseURL 修改成 process.env.API_HOST

axios.defaults.baseURL = process.env.API_HOST;