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

相关文章
|
7天前
|
JavaScript 算法 前端开发
为什么npm run serve正常,npm run build就报错:digital envelope routines::unsupported
通过本文的分析,我们详细介绍了 `npm run serve`正常但 `npm run build`时报错:`digital envelope routines::unsupported`的原因及解决方案。主要从检查Node.js版本、更新依赖、检查依赖库、配置文件及环境变量等方面进行了深入探讨。希望本文能帮助开发者解决这一问题,确保项目顺利构建和部署。
26 6
|
2月前
|
JavaScript 安全 测试技术
vue封装组件发布到Npm
【10月更文挑战第17天】
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
365 3
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
3月前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
3月前
|
缓存 JavaScript 前端开发
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
该文章提供了八种解决Vue项目创建时遇到的`command failed: npm install --loglevel error`错误的方法,包括清理缓存、更换npm源、重新安装Node.js等措施。
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
|
7月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
80 3
|
7月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
7月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
197 0
|
7月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
154 0
Vue3+Vite+TypeScript常用项目模块详解