关于vue-cli + webpack打包给后台,部署上线

1.路径问题(1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如,路径问题(这里的路径问题,是因为在项目中,我们使用了绝对路径,这里必须要用相对路径,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在全局引用的时候,写在了index.html中,安全

GossipHHH

6089人浏览 · 2017-12-08 10:58:34

GossipHHH · 2017-12-08 10:58:34 发布

 
 1.路径问题 

 
 (1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如, 
 路径问题 
 (这里的路径问题,是因为在项目中,我们使用了绝对路径,这里 
 必须要用相对路径 
 ,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在 
 全局引用 
 的时候,写在了index.html中,安全起见,可以 
 写入app.vue 
 中); 

 
 (2).在打包前还要在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到 
 build:{assetsPublicPath: './'},默认路径是'/',需要加上'.' 

 
 2.favicon.ico 

 
 (1).favicon图标也在index.html中引入了link的那句话,这个可以在webpack.dev.conf.js中的 

 
 new HtmlWebpackPlugin({ 

 
 favicon: './favicon.ico' 

 
 })加上这个路径,便可以找到这个图标; 

 
 3.打包好后可以自己测试运行是否正常 

 
 (1).这个时候需要利用node中的express,方法如下: 

 
 安装express: npm install -g express; 

 
 最新express4.0版本中将命令工具分家出来了,还需要安装一个命令工具: npm install -g express-generator; 

 
 创建一个express工程: express helloworld; 

 
 进入项目主目录: cd helloworld; 

 
 安装必备包: npm install; 

 
 启动程序: npm start; 

 
 把打包后的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看到项目了,这样测试好了后,就可以丢后台了 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^