webpack4 打包vue4.x项目,资源路径问题

刚开始搞vue的项目,只是需要用elementui。

重点,打包项目后,生成dist后,发现直接访问页面,所有资源文件(js,css)都直接指向根目录,并不指向dist目录下。

查了相关资料,都是早期的项目,找根目录下的一些配置文件,或者build目录里的配置,但4.x的项目,根本没这些文件,可能是我生成不对,反正没找到,就找了一圈资料,也没相关的。

目录下有package.json,找到如下配置

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10"
  },

@vue/cli-service 找到根目录node_modules@vue\cli-service\lib\options.js,找到如下代码:

exports.defaults = () => ({
  // project deployment base
  publicPath: '/',
  //publicPath: '../../',

  // where to output built files
  outputDir: 'dist',

  // where to put static assets (js/css/img/font/...)
  assetsDir: '/',

  // filename for index.html (relative to outputDir)
  indexPath: 'index.html',

assetsDir就是输出资源目录,那就把assetsDir值改为如下

assetsDir: '../../',

修改完成后,重新运行

npm run build

这样就可以了。
这里记录下,但不确定修改这里是不是最终方案。

你可能感兴趣的:(webpack4 打包vue4.x项目,资源路径问题)