我是用的是Vue-Cli4版本。
由于Vue-Cli4没有config文件夹下的index.js文件。
一、 在项目根目录下创建vue.config.js
注意: productionSourceMap: false ,这个为false,默认是true,改动的原因是:在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
module.exports = {
/* 部署应用包的基本URL */
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
/* 生产环境构建文件的目录 defalut: dist */
outputDir: "dist",
/* 放置生成的静态文件目录(js css img) */
assetsDir: "static",
/* 指定生成的index.html 输出路径 相对 default: index.html */
indexPath: "index.html",
/* 指定生成文件名中包含hash default: true */
filenameHashing: true,
/* 多页模式下 */
/* pages: {
index: {
// page 的入口
entry: "src/index/main.js",
// 模板来源
template: "public/index.html",
// 在 dist/index.html 的输出
filename: "index.html",
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
// title: "Index Page",
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "index"]
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
// subpage: "src/subpage/main.js"
} */
/* 是否保存时 lint 代码 */
lintOnSave: process.env.NODE_ENV === "production",
/* 是否使用编译器 default: false */
runtimeCompiler: false,
/* 默认babel-loader会忽略node_modules中的文件,你想显示的话在这个选项中列出来 */
// transpileDependencies: [],
/* 生产环境的source map */
productionSourceMap: false,
// crossorigin: "",
integrity: false,
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// devServer: {
// port: 8080,
// host: "0.0.0.0",
// https: false,
// // 自动启动浏览器
// open: false,
// proxy: {
// "/api": {
// //代理路径 例如 https://baidu.com
// target: "https://baidu.com",
// // 将主机标头的原点更改为目标URL
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// "^/api": ""
// }
// }
// }
// }
};
二、 在router文件夹下的index.js,注释掉mode
三、打包
最后输入:npm run build进行打包,生成dist文件夹,将这个dist文件放到服务器上,访问dist文件的index.html(可以在vue.config.js改动默认的index.html)就可以了。
项目部署成功,参考自如下:
1.cli3打包上传到服务器的相关配置
2.关于vue是怎么放到服务器上运行的基于vue-cli3
3.Vue项目如何部署到服务器
4.vue 设置 productionSourceMap