Vue本地开发环境配置和上线部署
开发环境只需要执行【npm run serve】即可启动服务。
如果需要跨域访问,可以通过配置vue.config.js的devServer解决。
该设置在正式环境是无效的。
-
*
-
* Vue-CLI项目的核心配置文件
-
*/
-
const webpack = require('webpack')
-
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
-
-
const path = require('path')
-
const resolve = dir => {
-
return path.join(__dirname, dir);
-
};
-
-
module.exports = {
-
// vue cli3.3之后废除了baseUrl,在这之后需要使用 publicPath
-
publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
-
chainWebpack: config => {
-
config.plugin('jquery').use(webpack.ProvidePlugin, [{
-
$: 'jquery',
-
jQuery: 'jquery',
-
'window.jQuery': 'jquery'
-
}])
-
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [{}])
-
},
-
devServer: {
-
before(app) {
-
},
-
open: true,
-
https: false,
-
// host: 'localhost',
-
// port: 8081,
-
proxy: {
-
'/prms/api': {
-
target: 'http://localhost:8082',
-
changeOrigin: true,
-
ws: true, // proxy websockets
-
pathRewrite: {
-
'^/api': '/api'
-
}
-
}
-
}
-
}
-
}
如果想打包发布,步骤如下:
1、执行 npm run build,项目目录结构下会生成一个dist文件夹,dist就是项目编译产生的静态资源文件。
2、将dist文件夹copy到web服务器就可以访问,例如tomcat, IIS。
但是如果项目有后端服务,则存在跨域的可能,网络请求会出现404错误,原因是vue.config.js配置的devServer.proxy只在开发环境有效,
这时候可以通过nginx的反向代理实现请求转发。
nginx.conf配置如下
-
server {
-
listen 8080 // 端口号
-
server_name ip // 项目 ip
-
-
#charset koi8-r
-
-
#access_log logs/host.access.log main
-
-
location / {
-
root E:/xxx/xxx/html/dist; // 项目资源文件路径
-
index index.html index.htm;
-
}
-
-
# 代理配置
-
location ~ /xxx/api/ {
-
proxy_pass http://localhost:8081
-
}
-
}
window服务器的场合需要到任务管理器关闭nginx服务。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgheibg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13