7f539609 by simon

默认提交

1 parent 916b069a
1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'fev'
1 NODE_ENV = 'production' 1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'production'
...\ No newline at end of file ...\ No newline at end of file
2 VUE_APP_TITLE = 'sandbox'
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 node_modules 2 node_modules
3 /dist 3 /dist
4 /fev 4 /fev
5 /sandbox
5 6
6 # local env files 7 # local env files
7 .env.local 8 .env.local
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 "serve": "vue-cli-service serve", 6 "serve": "vue-cli-service serve",
7 "dev": "vue-cli-service serve", 7 "dev": "vue-cli-service serve",
8 "build": "vue-cli-service build --no clean", 8 "build": "vue-cli-service build --no clean",
9 "fev": "vue-cli-service build --mode fev", 9 "sandbox": "vue-cli-service build --mode sandbox",
10 "lint": "vue-cli-service lint", 10 "lint": "vue-cli-service lint",
11 "oss": "node build/oss-released.js" 11 "oss": "node build/oss-released.js"
12 }, 12 },
......
1 const Timestamp = new Date().getTime(); 1 const Timestamp = new Date().getTime();
2 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 // 打包目录 3 // 打包目录
4 let webpack_public_path = 'dist' 4 let webpack_public_path = 'dist'
5 var path = require('path') 5 var path = require('path')
6 const PrerenderSPAPlugin = require('prerender-spa-plugin') 6 const PrerenderSPAPlugin = require('prerender-spa-plugin')
7 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer 7 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
8 8
9 let plugins = [ 9 let plugins = [
10 new MiniCssExtractPlugin({ 10 new MiniCssExtractPlugin({
11 filename: `static/css/[name].${Timestamp}.css`, 11 filename: `static/css/[name].${Timestamp}.css`,
12 chunkFilename: `static/css/[name].${Timestamp}.css` 12 chunkFilename: `static/css/[name].${Timestamp}.css`
13 }) 13 })
14 ]; 14 ];
15 15
16 if (process.env.NODE_ENV === 'production') { 16 if (process.env.NODE_ENV === 'production') {
17 // 生产环境 17 // 生产环境
18 webpack_public_path = process.env.VUE_APP_TITLE 18 webpack_public_path = process.env.VUE_APP_TITLE;
19 plugins.push( 19
20 new PrerenderSPAPlugin({ 20 plugins.push(
21 staticDir: path.join(__dirname, 'dist'), 21 new PrerenderSPAPlugin({
22 routes: ['/', '/demo', '/about'], 22 staticDir: path.join(__dirname, webpack_public_path || 'dist'), // 如果没配置环境目录(生产),则写到目录dist
23 renderer: new Renderer({ 23 routes: ['/', '/demo', '/about'],
24 inject: { 24 renderer: new Renderer({
25 foo: 'bar' 25 inject: {
26 }, 26 foo: 'bar'
27 headless: false, 27 },
28 renderAfterDocumentEvent: 'render-event', 28 headless: false,
29 //renderAfterTime: 5000, 29 renderAfterDocumentEvent: 'render-event',
30 //renderAfterElementExists: 'my-app-element' 30 //renderAfterTime: 5000,
31 }) 31 //renderAfterElementExists: 'my-app-element'
32 }) 32 })
33 ) 33 })
34 )
34 } else { 35 } else {
35 // 开发环境 36 // 开发环境
36 } 37 }
37 38
38 function resolve(dir) { 39 function resolve(dir) {
39 return path.join(__dirname, dir); 40 return path.join(__dirname, dir);
40 } 41 }
41 42
42 module.exports = { 43 module.exports = {
43 lintOnSave: true, 44 lintOnSave: true,
44 chainWebpack: (config) => { 45 chainWebpack: (config) => {
45 config.resolve.alias 46 config.resolve.alias
46 .set('@', resolve('src')) 47 .set('@', resolve('src'))
47 .set('@assets', resolve('src/assets')) 48 .set('@assets', resolve('src/assets'))
48 .set('@components', resolve('src/components')) 49 .set('@components', resolve('src/components'))
49 .set('@pages', resolve('src/pages')) 50 .set('@pages', resolve('src/pages'))
50 .set('@api', resolve('src/api')) 51 .set('@api', resolve('src/api'))
51 .set('@styles', resolve('src/styles')) 52 .set('@styles', resolve('src/styles'))
52 .set('@store', resolve('src/store')) 53 .set('@store', resolve('src/store'))
53 .set('@utils', resolve('src/utils')) 54 .set('@utils', resolve('src/utils'))
54 }, 55 },
55 configureWebpack: { // webpack 配置 56 configureWebpack: { // webpack 配置
56 // 修改打包后js文件名 57 // 修改打包后js文件名
57 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 58 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
58 filename: `static/js/[name].${Timestamp}.js`, 59 filename: `static/js/[name].${Timestamp}.js`,
59 chunkFilename: `static/js/[name].${Timestamp}.js` 60 chunkFilename: `static/js/[name].${Timestamp}.js`
60 }, 61 },
61 // 修改打包后css文件名 62 // 修改打包后css文件名
62 plugins: plugins 63 plugins: plugins
63 }, 64 },
64 // 修改打包后img文件名 65 // 修改打包后img文件名
65 // chainWebpack: config => { 66 // chainWebpack: config => {
66 // config.module 67 // config.module
67 // .rule('images') 68 // .rule('images')
68 // .use('url-loader') 69 // .use('url-loader')
69 // .tap(options => { 70 // .tap(options => {
70 // return { 71 // return {
71 // limit: 4096, 72 // limit: 4096,
72 // fallback: { 73 // fallback: {
73 // loader: 'file-loader', 74 // loader: 'file-loader',
74 // options: { 75 // options: {
75 // name: `img/[name].${Timestamp}.[ext]` 76 // name: `img/[name].${Timestamp}.[ext]`
76 // } 77 // }
77 // } 78 // }
78 // }; 79 // };
79 // }) 80 // })
80 // }, 81 // },
81 // 部署生产环境和开发环境下的URL。 82 // 部署生产环境和开发环境下的URL。
82 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 83 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
83 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。 84 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
84 //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath 85 //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
85 //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/", 86 //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
86 publicPath: process.env.NODE_ENV === "dev" ? "/" : "./", 87 publicPath: process.env.NODE_ENV === "dev" ? "/" : "./",
87 88
88 // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致) 89 // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
89 outputDir: webpack_public_path, 90 outputDir: webpack_public_path,
90 //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) 91 //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
91 assetsDir: "assets", 92 assetsDir: "assets",
92 //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名) 93 //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名)
93 // indexPath: "myIndex.html", 94 // indexPath: "myIndex.html",
94 //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) 95 //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
95 filenameHashing: false, 96 filenameHashing: false,
96 97
97 // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint 98 // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
98 lintOnSave: true, 99 lintOnSave: true,
99 //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置 100 //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
100 // lintOnSave: process.env.NODE_ENV !== 'production', 101 // lintOnSave: process.env.NODE_ENV !== 'production',
101 102
102 //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false) 103 //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
103 // runtimeCompiler: false, 104 // runtimeCompiler: false,
104 105
105 /** 106 /**
106 * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 107 * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
107 * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件 108 * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
108 * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 109 * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
109 * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 110 * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
110 * */ 111 * */
111 productionSourceMap: false, 112 productionSourceMap: false,
112 113
113 // 它支持webPack-dev-server的所有选项
114 // devServer: {
115 // host: "localhost",
116 // port: 9001, // 端口号
117 // https: false, // https:{type:Boolean}
118 // open: true, //配置自动启动浏览器
119 // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
120 // }
121 };
...\ No newline at end of file ...\ No newline at end of file
114 // 它支持webPack-dev-server的所有选项
115 // devServer: {
116 // host: "localhost",
117 // port: 9001, // 端口号
118 // https: false, // https:{type:Boolean}
119 // open: true, //配置自动启动浏览器
120 // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
121 // }
122 };
......