记录一下项目部署
(主要我老忘记,不停的麻烦别人,笨蛋式记录)
一、如果是vue init webpack 创建的项目
1、vue.config.js
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin"); //引入compression-webpack-plugin
module.exports = {
publicPath: "/", //基本路径
outputDir: "dist", //构建时的输出目录
assetsDir: "decisionAnalysis", //放置静态资源的目录
indexPath: "decisionAnalysis.html", //html 的输出路径
// pwa: {
// iconPaths: {
// favicon32: 'rxgh_favicon.ico',
// favicon16: 'rxgh_favicon.ico',
// appleTouchIcon: 'rxgh_favicon.ico',
// maskIcon: 'rxgh_favicon.ico',
// msTileImage: 'rxgh_favicon.ico'
// }
// },
filenameHashing: true, //文件名哈希值
lintOnSave: false, //是否在保存的时候使用 `eslint-loader` 进行检查。
// //组件是如何被渲染到页面中的? (ast:抽象语法树;vDom:虚拟DOM)
// //template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
// //runtime-only:将template在打包的时候,就已经编译为render函数
// //runtime-compiler:在运行的时候才去编译template
// runtimeCompiler: false,
// transpileDependencies: [], //babel-loader 默认会跳过 node_modules 依赖。
// productionSourceMap: false, //是否为生产环境构建生成 source map?
//调整内部的 webpack 配置
configureWebpack: (config) => {
// if (NODE_ENV !== 'development') { //生产环境或者测试环境
config.devtool = "hidden-source-map";
config.plugins.push(
new CompressionPlugin({
/* [file]被替换为原始资产文件名。
[path]替换为原始资产的路径。
[dir]替换为原始资产的目录。
[name]被替换为原始资产的文件名。
[ext]替换为原始资产的扩展名。
[query]被查询替换。*/
filename: "[path].gz[query]",
//压缩算法
algorithm: "gzip",
//匹配文件
test: /\.js$|\.css$|\.html$/,
//压缩超过此大小的文件,以字节为单位
threshold: 5240,
minRatio: 0.8,
//删除原始文件只保留压缩后的文件
// deleteOriginalAssets: true
})
);
// }else{
// config.devtool = 'source-map'
// }
},
chainWebpack: (config) => {
// if (process.env.NODE_ENV === 'development')
config.plugins.delete("prefetch");
config.resolve.alias
.set("vue$", "vue/dist/vue.esm.js")
.set("@", resolve("src"));
},
// 配置 webpack-dev-server 行为。
devServer: {
host: "0.0.0.0",
port: 80, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览
//显示警告和错误
overlay: {
warnings: false,
errors: true,
},
proxy: {
"/api/": {//一般baseUrl的命名是根据后端接口域名后面连接的字符串,比如说https://xxxxx.cn/api,这里就取名api
target: "https:/xxxxx.cn/api",
changeOrigin: true, // 是否跨域
ws: false, // 是否支持webssocket
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
"^/api": "",
},
},
},
},
};
2、router.js
const router = new VueRouter({
mode: "history",
base: "decisionAnalysis",//这里base的命名要和vue.config.js里放静态资源的目录一致
routes,
});
3、在写接口的时候用上vue.config.js配置的baseUrl
let baseURL = "/api";
const service = axios.create({
baseURL,
timeout: 6000,
});
3.保存,命令行跑npm run build.然后在静态资源文件夹找到dist文件夹,打包丢给运维。告诉他域名是https://xxxxx.cn/api/swagger-ui.html#/,代理到这个前端资源上,访问路径是xxxx.cn/yyyy(随你命名)
他部署好了,就可以访问了。