说明
项目使用vue-cli3构建的vue前端项目，分为webpc端和移动端，需要在nginx上使用同一个域名部署两个vue工程，经过半天的尝试和摸索，终于成功；
路由
路由设置要每个项目的路由前缀有区分开来，根据业务区分开来
项目一
export default new Router({
mode: 'history',
base: 'web',
routes: [
...
]
项目二
export default new Router({
mode: 'history',
base: 'app',
routes: [
...
]
wep与app分别代表pc端和移动端
打包事项
我这里的打包针对css，js，图片，字体等静态文件做了一些命名的处理，方便后续nginx部署配置的时候区分开来，以减少不必要麻烦
chainWebpack: config => {
//css文件
config.resolve.alias
.set('@', path.join(__dirname, 'src'));
config.plugin('extract-css')
.tap(args => [{
filename: `css/[name].app.css?v=` + Timestamp,
chunkFilename: `css/[name].app.css?v=` + Timestamp
}])
//图片
config.module
.rule('images')
.use('url-loader')
.tap(options => {
return {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: `img/[name].app.[ext]`
}
}
};
})
//字体
config.module
.rule('fonts')
.use('url-loader')
.tap(options => {
return {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: `fonts/[name].app.[ext]`
}
}
};
})
},
css: {
extract: true,
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
css: {}, // 这里的选项会传递给 css-loader
postcss: {} // 这里的选项会传递给 postcss-loader
}, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
modules: false // 启用 CSS modules for all css / pre-processor files.
},
// webpack配置
configureWebpack: {
//js文件
output: {
filename: `js/[name].app.js`,
chunkFilename: `js/[name].app.js`
},
plugins: [
// 生成可视化模块依赖图
// 这里通过正则匹配了 moment/locale 下的名为 zh-cn 的文件。之后再打包引用moment大小减少了 70% 多
new webpack.ContextReplacementPlugin(
/moment[/\\]locale$/,
/zh-cn/
)
]
}
如上代码css，js，图片等的处理，都统一在后面加了‘app’来区分未移动端的资源文件；
如css的这一部分
.tap(args => [{
filename: `css/[name].app.css?v=` + Timestamp,
chunkFilename: `css/[name].app.css?v=` + Timestamp
}])
js的重命名部分
output: {
filename: `js/[name].app.js`,
chunkFilename: `js/[name].app.js`
},
图片的部分
options: {
name: `fonts/[name].app.[ext]`
}
针对web端使用web来代替app同样的使用方法，然后打包编译
分别生成web和app两个工程
配置nginx配置文件
nginx的配置文件位于nginx目录下的conf下的nginx.conf文件，这里不做过多的解释
web用来放pc端的前端工程代码
app文件用来存放移动端工程代码
配置文件内容如下：
server {
listen 8090;
server_name localhost;
root G:/Server/nginx-1.10.3/www;
index index.html;
location /app{
try_files $uri $uri/ /app/index.html;
}
location ~ .*\.app.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot)$ {
root www/app;
proxy_temp_path www/app;
}
location /app/ {
try_files $uri $uri/ /app/index.html;
}
location /web/ {
try_files $uri $uri/ /web/index.html;
}
location /web {
try_files $uri $uri/ /web/index.html;
}
location ~ .*\.web.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf)$ {
root www/web;
proxy_temp_path www/web;
}
#以下服务器地址
location /app{
proxy_pass http://xxxx.xx.xx.xx:8088;
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
}
配置解释：
location ~ .*.app.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot)$ {
root www/app;
proxy_temp_path www/app;
}
~ .*\.app.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot)$
这一串什么意思呢？这里稍微给大家解释下：这相当于一个正则在nginx中用来匹配文件的或者uri的，这里代表的意思是:以 .【任意字符】.app.【jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot其中一个（|是或的意思）】结尾的文件访问目录www/app;主要作用是用于静态文件的访问
如下同理：
location ~ .*\.web.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf)$ {
root www/web;
proxy_temp_path www/web;
}
只是把app换成了web指向也换了，其他的内容都一样，这个之前前面在打包时命名需要注意的事项，这边是相关联的；
经过实际检验可用
谢谢支持，如有错误请指出
