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

简介: 【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/下面了

相关文章
|
8天前
|
JavaScript
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
13 0
|
8天前
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
59 1
|
7天前
|
JavaScript Unix Shell
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
11 0
|
8天前
|
弹性计算 Dubbo Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中配置完fc,出现‘Function instance exited unexpectedly(code 1, message:operation not permitted) with start command 'npm run start '. 报错如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
26 5
|
8天前
|
JavaScript 开发者 资源调度
Spartacus 2211 开发版本采用 npm install 结合 package-lock.json 避免 build 出错
Spartacus 2211 开发版本采用 npm install 结合 package-lock.json 避免 build 出错
10 0
Spartacus 2211 开发版本采用 npm install 结合 package-lock.json 避免 build 出错
|
8天前
|
JavaScript 网络安全 数据安全/隐私保护
【问题:创建Vue项目】npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR!
【问题:创建Vue项目】npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR!
|
8天前
|
Web App开发 JavaScript 前端开发
如何使用npm创建Node.js项目?
【2月更文挑战第10天】
65 3
如何使用npm创建Node.js项目?
|
6天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
21 0
|
7天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
JavaScript
vue知识点
vue知识点
11 4