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

更多相关:

  • 本文来自 运维人生 ,作者:fly是个稻草人链接:http://www.ywadmin.com/?id=76误删除linux系统文件了?不用急,本文将给你一个恢复linux文件的方法,让你轻松应对运维中的各风险问题。方法总比问题多~说在前面的话针对日常维护操作,难免会出现文件误删除的操作。大家熟知linux文件系统不同win有回收...

  • 原文来自SecIN社区—作者:WiHat0x00 什么是WebShell渗透测试工作的一个阶段性目标就是获取目标服务器的操作控制权限,于是WebShell便应运而生。Webshell中的WEB就是web服务,shell就是管理攻击者与操作系统之间的交互。Webshell被称为攻击者通过Web服务器端口对Web服务器有一定的操作权限,而...

  • 断电时文件系统发生了什么?硬盘又发生了什么?下一次开机时写到一半的文件在系统层面还在吗?在底层还在吗?更进一步的, 文件系统如何保证事务性, 会不会存在某种极端情况导致例如最后几个bit还没写完, 文件系统却认为它成功了的情况?回答不限任何文件系统,谢谢!下面是「北极」的回复分享断电的一瞬间,很多事情是无法确定的:1. 你无法确定...

  • 接到项目需求。需要搭建一个页面进行交互,慢慢来b (2).jpg使用python django框架进行页面的搭建在项目文件下打开窗口,输入命令;django-admin startproject helloword#在文件helloword/helloword/创建view.py在view.py文件中输入以代码from django....

  • 常见的错误集合解决方案(一)No.1提示错误'Microsoft.VC90.CRT,version="9.0.21022.8"把Microsoft.NET Framework 3.5.1下面的全部勾选上。No.2解决Qt Designer设计的图标但是VS生成不显示问题描述:在Qt designer中为菜单栏和工具栏设计的图标,但是...

  • 在config/index.js中的build下面找到productionSourceMap设置为false,cnpm run build试试看就发现文件小很多了  ...

  • 前言:    设置,主要用于编译设置 1.分类 在Maven的pom.xml文件中,存在如下两种: (1)全局配置(project build)          针对整个项目的所有情况都有效 (2)配置(profile build)            针对不同的profile配置

  •   build number, 也称为build id, 在build release的流程中唯一标示一个build,也是正式的产品的product version 和file version后两位(Major.minor.xxx.xxx)的来源,可以使用合适的方法将build number转化到product version和fil...

  • 【从零开始的ROS四轴机械臂控制(五)】八、运动控制节点1.定义服务GoToPosition.srv2.修改CMakeLists.txt3.修改package.xml4.构建包5.arm_mover节点代码6.Arm Mover的启动和互动(1)修改gazebo.launch(2)测试arm_mover服务...

  • Alt+Shift+H 查看整个代码文件的修改历史记录 Ctrl+Shift+H 只查看被选中代码内容的修改历史记录(更具针对性)...

  • 第一种情况修改下面这个位置   第二种情况修改 如果还是不行就把模式改成hash...

  • 锁的类型:(1) 共享锁:共享锁用于所有的只读数据操作.(2) 修改锁:修改锁在修改操作的初始化阶段用来锁定可能要被修改的资源,这样可以避免使用共享锁造成的死锁现象(3) 独占锁:独占锁是为修改数据而保留的。它所锁定的资源,其他事务不能读取也不能修改。独占锁不能和其他锁兼容。(4) 架构锁结构锁分为结构修改锁(Sch-M)和结构稳定锁...

  • 一.安装postgresql 本文仅以 redhat,postgresql9.4为例,使用yum方式进行介绍。 官网:http://www.postgresql.org/download/linux/redhat/ 1.下载postgresql的yum源 yum install http://yum.postgresql.org...