【3】npm run build Vue的项目，如何修改相对路径配置

如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦，你不能直接把build好的文件抛进一个目录，你不能直接在本地打开用vue做好的静态网站。改成相对路径，主要需要做两步：

1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./' （注意！很多同学直接在dev:{}里面的assetsPublicPath改成了true，结果本地运行的时候报错Cannot GET /，所以一定要注意找准确位置是在build:{}里面修改哟）

2、在build => util.js 里找到ExtractTextPlugin.extract，增加一行：publicPath: '../../'

然后npm run build打包出来的文件，就可以直接打开运行啦！也可以直接作为HTML静态页面扔进服务器

3、修改main.js文件的存放位置，把main.js挪到src/js/下面，找到build/webpack.base.conf.js

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/js/main.js'//修改这个路径即可},
…

这样，就可以把main.js文件剪切到src/js/下面了

4、修改App.vue的路径，把它挪到src/vue/文件夹下面，打开刚刚第3步的main.js文件

 import App from '../vue/App';//修改这个路径即可new Vue({ el: '#app', render: h => h(App), router });

这样，就可以把App.vue文件剪切到src/vue/下面了

【3】npm run build Vue的项目，如何修改相对路径配置相关推荐

vue使用npm run build命令打包
vue使用npm run build命令打包项目当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...
npm run build 打包命令
vue使用npm run build命令打包项目当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行np ...
[vue] vue项目有使用过npm run build --report吗？
[vue] vue项目有使用过npm run build --report吗? 给 process.env 对象添加了一个属性 npm_config_report: "true", ...
vue项目打包：npm run build 进程卡死
vue项目打包:npm run build 进程卡死?! 解决方法找到以下build文件夹下的版本检测js文件,并注释监测npm代码即可. 文件的路径和处理办法如下:(注释掉第19~25行的代码即可 ...
vue项目npm run build后如何在本地查看效果
因为在本人实际开发过程中,遇到过这样的问题--部署到生产环境中的页面样式和本地开发环境中的样式差异巨大, 所以需要通过npm run build打包后,直接在本地查看效果,以便于及时将这些样式冲突类的 ...
vue项目执行npm run build 打包出现某些图片，字体，资源文件路径404，无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹正常情况下static文件夹是非常干净的如果你发现你的static文件夹出现了多余的img.fonts ...
vue中Npm run build 根据环境传递参数方法来打包不同域名
项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, ...
vue打包npm run build
在src同级文件夹建vue.config.js文件内容为 module.exports = {// baseUrl:'./', 在vue-cli.3.3版本后 baseUrl被废除了,因此这边要写成 ...
vue打包（npm run build）
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架二.vue项目的打包 1.大家都知道使用npm run build进行打包,这个时候你直接打开dist/ ...

【3】npm run build Vue的项目，如何修改相对路径配置

【3】npm run build Vue的项目，如何修改相对路径配置相关推荐

最新文章

热门文章